<template>
  <div>
    <el-dialog center :title="isAdd ? '添加限时秒杀' : '编辑限时秒杀'" :visible.sync="isShow" :before-close="offCheck">
      <el-form :model="seckInfo" :rules="rules" ref="seckForm" label-width="100px">
        <el-form-item prop="title" label="活动名称">
          <el-input v-model="seckInfo.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动期限">
          <el-time-picker v-model="beginTime" :picker-options="{
            selectableRange: '5:30:00 - 22:30:00'
          }" placeholder="开始时间">
          </el-time-picker>
          <el-time-picker v-model="endTime" :picker-options="{
            selectableRange: '5:30:00 - 22:30:00'
          }" placeholder="结束时间">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="一级分类">
          <el-select v-model="seckInfo.first_cateid" placeholder="请选择" @change="changeCate(true)">
            <el-option v-for="item in cateList" :key="item.id" :label="item.catename" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级名称">
          <el-select v-model="seckInfo.second_cateid" placeholder="请选择" @change="changeGoods(true)">
            <el-option v-for="item in cateChildren" :key="item.id" :label="item.catename" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品">
          <el-select v-model="seckInfo.goodsid" placeholder="请选择">
            <el-option v-for="item in goodsList" :key="item.id" :label="item.goodsname" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="seckInfo.status" active-color="#13ce66" inactive-color="#ccc" :active-value="1"
            :inactive-value="2">
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="offCheck">取 消</el-button>
        <el-button type="primary" @click="addCate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入接口地址
import { getGoodList, seckAdd, seckInfo, seckEdit } from '@/request/api';
// 引入辅助性函数
import { mapActions, mapGetters } from 'vuex';
export default {
  props: ["isShow", "isAdd"],
  computed: {
    ...mapGetters({
      // 获取商品分类列表
      cateList: "cate/getCateList",
    })
  },
  data() {
    return {
      seckInfo: {
        title: "",
        begintime: "",
        endtime: "",
        first_cateid: "",
        second_cateid: "",
        goodsid: "",
        status: 1,
      },
      rules: {
        title: [
          { required: true, message: "请输入轮播图名称", trigger: "blur" },
          { min: 2, max: 12, message: "长度在 2 到 12 个字符", trigger: "blur" },
        ],
      },
      cateChildren: [],
      goodsList: [],
      beginTime: "",
      endTime: ""
    };
  },
  methods: {
    // 获取二级商品分类列表
    changeCate(flag) {
      if (flag) {
        this.seckInfo.second_cateid = ""
        this.seckInfo.goodsid = ""
      }
      let idx = this.cateList.findIndex(item => item.id == this.seckInfo.first_cateid)
      this.cateChildren = this.cateList[idx].children || []
    },
    // 获取二级分类下的商品列表
    changeGoods(flag) {
      if (flag) {
        this.seckInfo.goodsid = ""
      }
      // 调用获取二级分类下的商品列表的接口
      getGoodList({ cateid: this.seckInfo.second_cateid, type: 2 }).then(res => {
        if (res.code == 200) {
          this.goodsList = res.list.goodData || []
        }
      })
    },
    // 点击取消
    offCheck() {
      // 子传父
      this.$emit("offCheck", false)
      // 清空表单信息
      this.$refs.seckForm.resetFields()
      this.seckInfo = {
        title: "",
        begintime: "",
        endtime: "",
        first_cateid: "",
        second_cateid: "",
        goodsid: "",
        status: 1,
      }
      this.beginTime = ""
      this.endTime = ""
      this.cateChildren = []
      this.goodsList = []
    },
    // 获取轮播图列表
    ...mapActions({
      // 获取商品列表分类
      getCateList: "cate/getCateList_Action",
      getSeckList: "seck/getSeckList_Action"
    }),
    // 限时秒杀数据回显
    getOneSeck(id) {
      // 调用查询一条轮播图信息接口
      seckInfo({ id }).then(res => {
        console.log(res);
        if (res.code == 200) {
          // 实现数据回显
          this.seckInfo = res.list
          this.seckInfo.id = id
          this.beginTime = new Date(parseInt(res.list.begintime))
          this.endTime = new Date(parseInt(res.list.endtime))
          //重新调用change事件 目的实现 label的渲染
          this.changeCate(false);
          this.changeGoods(false);
        }
      })
    },
    //点击确定
    addCate() {
      this.$refs.seckForm.validate((flag) => {
        if (flag) {
          // 转换时间字符串为时间戳
          this.seckInfo.begintime = this.beginTime.getTime()
          this.seckInfo.endtime = this.endTime.getTime()
          //判断是否为添加还是编辑
          if (this.isAdd) {
            //调用添加接口
            seckAdd(this.seckInfo).then(res => {
              if (res.code == 200) {
                this.offCheck()
                this.$message.success(res.msg);
                // 重新渲染秒杀列表
                this.getSeckList()
              } else {
                this.$message.error(res.msg);
              }
            })
          } else {
            //调用编辑接口
            seckEdit(this.seckInfo).then(res => {
              if (res.code == 200) {
                this.offCheck()
                this.$message.success(res.msg);
                // 重新渲染秒杀列表
                this.getSeckList()
              } else {
                this.$message.error(res.msg);
              }
            })
          }
        } else {
          // 错误提示
          this.$message.error("请输入正确的内容");
        }
      });
    },
  },
  mounted() {
    // 判断商品分类列表是否有值，没有则调用获取行动
    if (this.cateList.length == 0) {
      this.getCateList()
    }
  }
};
</script>

<style scoped>
</style>
